import React, { Component } from "react";
import PubSub from "pubsub-js";
import "./index.css";
export default class List extends Component {
  state = {
    users: [],
    isFirst: true,
    isLoading: false,
    err: "",
  };
  componentDidMount() {
    this.token = PubSub.subscribe("aska", (_, data) => {
      this.setState(data);
    });
  }
  componentWillUnmount() {
    PubSub.unsubscribe(this.token);
  }
  render() {
    const { isFirst, isLoading, users, err } = this.state;
    return (
      <div className="row">
        {isFirst ? (
          <h3>欢迎使用</h3>
        ) : isLoading ? (
          <h3>loading...</h3>
        ) : err ? (
          <h3>{err}</h3>
        ) : (
          users.map((user) => {
            return (
              <div key={user.id} className="card">
                <a rel="noreferrer" href="https://github.com/reactjs" target="_blank">
                  <img alt="avatars" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1419628337,1603242413&fm=26&gp=0.jpg" style={{ width: "100px" }} />
                </a>
                <p className="card-text">{user.login}</p>
              </div>
            );
          })
        )}
      </div>
    );
  }
}
